<template>
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.id+''">
        <template #title>
            <el-icon v-if="item.icon">
                <component class="el-menu-icon" :is="item.icon"></component>
            </el-icon>
            <el-icon v-else><Menu /></el-icon>
            <span>{{ item.name }}</span>
        </template>
        <menu-item
                v-for="item2 in item.children"
                :key="item2.id"
                :item="item2"
        ></menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
        <el-icon v-if="item.icon">
            <component class="el-menu-icon" :is="item.icon"></component>
        </el-icon>
        <template #title>{{ item.name }}</template>
    </el-menu-item>
</template>

<script lang="ts" setup>
    import {defineProps, reactive} from 'vue'
    //父级props传输的内容解析
    const props = defineProps(['item']);
    //定义到item变量中
    const item = reactive(props.item);
</script>

<script lang="ts">
    export default {
        name: 'menuItem',
    }
</script>
<style scoped>
</style>